<template>
  <ul class="core-competitiveness">
    <li
      v-for="(item, index) in data"
      :key="item.title"
      :class="item.singleLine ? 'single-li' : ''"
      :style="[
        `height:${liHeight}px`,
        activeIndex === index ? '' : `background-image:url(${item.url})`,
      ]"
      @mouseenter="activeIndex = index"
      @mouseleave="activeIndex = null"
    >
      <!--   -->
      <div class="img-box">
        <img
          v-if="activeIndex === index"
          :src="hoverImage"
          alt=""
          class="hoverImage"
        />
      </div>

      <div class="text-box">
        <div>{{ item.title }}</div>
        <p v-for="el in item.textArr">{{ el }}</p>
      </div>
    </li>
  </ul>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { imgUrl } from "@/utils/common";
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  hoverImage: {
    type: String,
    default: imgUrl + "core-competence-hover.png",
  },
  type: {
    type: Number,
    default: 0,
  },
  liHeight: {
    type: Number,
    default: 210,
  },
});
const activeIndex = ref();
const setActive = (index) => {
  activeIndex.value = index;
};
</script>
<style lang="scss" scoped>
.core-competitiveness {
  width: 66.7%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: calc((100% - 24px) / 2);
    background-color: #eff3fd;
    border-radius: 8px;
    margin-bottom: 24px;
    background-position: right;
    background-size: auto;
    background-repeat: no-repeat;
    height: 210px;
    /* padding: 40px; */
    position: relative;
    .img-box {
      position: absolute;
      top: 0;
      left: 0;
      /* width: 100%;
      height: 210px; */
      width: 100%;
      height: 100%;
      z-index: 1;
      overflow: hidden;
      border-radius: 8px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      /* display: none; */
    }
    &:nth-of-type(2n-1) {
      margin-right: 24px;
    }
    &:last-of-type {
      margin-bottom: 80px;
    }
    div {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    p {
      font-weight: 400;
      font-size: 16px;
      line-height: 32px;
    }
    &:hover {
      background-color: #1678ff;
      color: #fff;
    }
  }

  .single-li {
    width: 100%;
    margin-right: 0px !important;
    p,
    div {
      width: 50%;
    }
  }
}
.text-box {
  position: absolute;
  top: 32px;
  left: 40px;
  z-index: 2;
  width: calc(100% - 80px);
}
.hoverImage {
  animation: expandSize 0.6s forwards;
}
@keyframes expandSize {
  0% {
    /* height: 0; */
  }
  100% {
    transform: scale(1.2);
  }
}
</style>
import type { transform } from "typescript";
